<template>
	<view class="message">
    <view class="types">
      <block v-for="(type, index) in types" :key="index">
        <card-com :show-gap="false">
          <view class="item" @click="goToNotifications(type.type)">
            <image class="icon" mode="aspectFit" :src="type.icon" ></image>
            <view class="content">
              <view class="title">
                <view class="text">{{ type.name }}</view>
                <view class="time" v-if="type.latest!=''">{{ type.latest.human_created_at }}</view>
              </view>
              <view class="brief">
                <view class="text" v-if="type.latest!=''">{{ type.latest.data.message }}</view>
                <view class="count" v-if="type.unread_count > 0">{{ type.unread_count }}</view>
              </view>
            </view>
          </view>
        </card-com>
      </block>
      <card-com :show-gap="false" >
        <button class="service"  :plain="true" @click="customerService()" >
          <image class="icon" mode="aspectFit" src="/static/images/server-face.png"></image>
          <view class="content">
            <view class="title">
              <view class="text">联系客服</view>
            </view>
            <view class="brief">
              <view class="text">点击查看最新客服消息</view>
            </view>
          </view>
        </button>
      </card-com>
    </view>
		<!-- <down-load-app-com></down-load-app-com> -->
	</view>
</template>

<script>
// import AuthChecking from "mixins/AuthChecking";
import store from "store"
import {mapGetters} from 'vuex'
import {getNotificationTypes} from "api/notificationApi";

export default {
  // mixins: [AuthChecking],
	store,
  data() {
    return {
      types: [],
    };
  },
	computed: {
		...mapGetters(['isLogin']) //isLogin 登录状态
	},
  methods: {
    async loadNotificationTypes() {
      const response = await getNotificationTypes()
      this.types = response.data
    },
		customerService(){
			location.href = 'weixin://dl/business/?t=svbvUImDUma'
			// uni.navigateTo({url: '/packs/pages/download/download'})
		},
    goToNotifications(type) {
      uni.navigateTo({url: `/packs/pages/notification/notifications?type=${type}`})
    }
  },
  async onShow() {
  	if(await this.isLogin){
  		await this.loadNotificationTypes()
  	}
		uni.setStorage({
			 key:"newsTop",
			 data:0
		})
  }
}
</script>

<style lang="scss" scoped>
.message {
  .types {
    width: 710rpx;
    margin: 0 auto;
    .item {
      display: flex;
	  align-items: center;
      .icon {
        width: 68rpx;
        height: 68rpx;
        margin: 0 20rpx;
      }
      .content {
        width: 580rpx;
        .title {
          display: flex; justify-content: space-between;
          .text {
            font-size: 26rpx; font-weight: 500; color: #333333;
          }
          .time {
            font-size: 20rpx; font-weight: 400; color: #999999;
          }
        }
        .brief {
          display: flex; justify-content: space-between; margin-top: 10rpx;
          .text {
			width: 500rpx;
            font-size: 24rpx; font-weight: 400; color: #999999;
          }
          .count {
            width: 24rpx; height: 24rpx; background: #E13A3A; border-radius: 24rpx;
            font-size: 16rpx; font-weight: 500; color: #FFFFFF; text-align: center;
          }
        }
      }
    }
    .service {
      display: flex;
      align-items: center;
      border: none;
      margin: 0;
      padding: 0;
      .icon {
        width: 68rpx;
        height: 68rpx;
        margin: 0 20rpx;
      }
      .content {
        width: 580rpx;
        .title {
          display: flex;
          justify-content: space-between;
          .text {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            line-height: 26rpx;
          }
        }
        .brief {
          display: flex; justify-content: space-between; margin-top: 10rpx;
          .text {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            line-height: 24rpx;
          }
        }
      }
    }
  }
}
</style>
